import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import '../login.less'
import Icon from '@/components/Icon'
import { Input, Form, Button, message } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import { LockOutlined } from '@ant-design/icons-vue'
import { useStore } from '@/utils/useStore'
import PropTypes from '@/utils/PropTypes'

export default defineComponent({
  name: 'ComponentName',
  props: {
    key: PropTypes.number().def(1),
  },
  setup() {
    type User = {
      phone: string
      password: string
    }
    const store = useStore()
    const router = useRouter()
    const formRef = ref<FormInstance>()
    const loading = ref<boolean>(false)
    const form = reactive<User>({
      phone: '',
      password: '',
    })

    // 验证码
    const imgCode = ref<any>()
    const updateCode = () => {
      // loginApi
      //   .getCaptchaImage({ id: uuid })
      //   .then((rsp: any) => {
      //     if (rsp.code == '10000') imgCode.value = rsp.data
      //   })
      //   .catch((error) => console.log(error))
    }
    updateCode()
    const onSubmit = () => {
      loading.value = true
      store
        .dispatch('user/Login', form)
        .then((res) => {
          if (res.code == '10000') {
            store.dispatch('user/getMenus').then((result: any) => {
              if (result.code == '10000') {
                localStorage.frontAsyncRoutes =
                  JSON.stringify(result.data) || ''
                store.commit('permissionModule/setAsyncRoute', result.data)
                store.dispatch('permissionModule/getPermissionRoutes')
              }
              if (result.data) router.push('/home')
            })
          } else {
            message.error(res.msg)
          }
          loading.value = false
        })
        .catch(() => {
          loading.value = false
          updateCode()
        })
    }
    return () => (
      <div class="login_box">
        <Form ref={formRef} model={form} wrapperCol={{ span: 18, offset: 3 }}>
          <Form.Item
            name="loginId"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input
              placeholder="账号"
              v-model:value={form.phone}
              style={{ height: '40px' }}
              v-slots={{
                prefix: () => <Icon icon="user" colors="#999"></Icon>,
              }}
            />
          </Form.Item>
          <Form.Item
            name="loginPassword"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input
              type="password"
              placeholder="密码"
              v-model:value={form.password}
              style={{ height: '40px' }}
              v-slots={{
                prefix: () => (
                  <LockOutlined
                    class="site-form-item-icon"
                    style={{ color: '#999' }}
                  />
                ),
              }}
            />
          </Form.Item>
          <Form.Item class="login-btn-box">
            <Button
              type="primary"
              onClick={onSubmit}
              style={{ width: '100%', borderRadius: '4px' }}
              loading={loading.value}
            >
              登录
            </Button>
            {/* <span class="pwBox" onClick={() => Router.push('/forgetPw')}>
          忘记密码?
        </span> */}
          </Form.Item>
        </Form>
      </div>
    )
  },
})
